<template>
  <div class="resform">
    <div class="title">申请进度</div>
    <el-steps :active="step" align-center class="item">
      <el-step title="提交申请" :description="props.applyTime" />
      <el-step title="审核" :description="statusText" />
      <el-step title="缴纳创作者质量保证金" :description="props.isPayed ? '' : '待缴纳'" />
    </el-steps>
    <div v-if="props.status == 0" class="content">
      您的申请已提交,请耐心等待管理员审核,审核通过将短信通知您
    </div>
    <div v-if="props.status == 2" class="failed-cotent">
      <div v-if="props.rejectDesc" class="flex">
        <span style="color: #4e5969">驳回说明：</span>
        <div class="description">{{ props.rejectDesc }}</div>
      </div>
    </div>

    <div v-if="isShowBtn" class="approval-btn">
      <el-button v-if="props.status == 2" type="primary" @click="toFirstStep">修改资料</el-button>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "RegisterSteps",
};
</script>
<script setup lang="ts">
import { inject } from "vue";

const isShowBtn = inject("isShowBtn"); // 请求结束后再做按钮的显示隐藏判断
const props = defineProps({
  // 审核状态 0待审核 1通过 2拒绝
  status: {
    type: Number,
    default: 0,
  },
  // 支付状态
  isPayed: {
    type: Boolean,
    default: false,
  },
  // 申请时间
  applyTime: {
    type: String,
    default: "",
  },
  // 驳回原因
  rejectDesc: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["toFirstStep"]);
const statusText = computed(() => {
  return ["审核中", "已通过", "未通过"][props.status];
}); // 0,1,2
// 进度条绑定值 1\2\3
const step = computed(() => {
  return props.status == 1 ? 3 : 2;
});
// 修改资料
const toFirstStep = () => {
  emit("toFirstStep");
};
</script>

<style scoped>
.title {
  font-size: 14px;
  font-weight: bold;
  margin: auto;
  color: #3d3d3d;
  padding-left: 10%;
}
.resform {
  width: 60%;
  margin: 0 auto;
  margin-top: 30px;
}
.item {
  padding-top: 50px;
}
.content {
  width: 638px;
  margin: 50px auto;
  padding: 20px 0;
  font-size: 14px;
  background-color: #f7f8fa;
  color: #4e5969;
  text-align: center;
}
.approval-btn {
  text-align: right;
  color: #999999;
  border-radius: 4px;
}
.failed-cotent {
  display: flex;
  justify-content: center;
  margin: 40px auto;
}

.description {
  width: 582px;
  height: 97px;
  padding: 5px 10px;
  display: flex;
  color: #4e5969;
  background-color: #ffffff;
}
::v-deep .el-step__title .is-finish {
  font-size: 16px;
}
</style>
